<script setup lang="ts">
import { ref } from 'vue'
//控制内容是否显示
const show = ref(false)
const isshow = () => {
  show.value = !show.value
}
//显示动画
const enter = (el: Element) => {
  const htl = el as HTMLElement
  const { height } = el.getBoundingClientRect()
  htl.style.height = '0px'
  setTimeout(() => {
    htl.style.height = `${height}px`
  }, 10)
}
//隐藏动画
const leave = (el: Element) => {
  const htl = el as HTMLElement
  htl.style.height = '0px'
}

</script>

<template>
  <div class="content-item">
    <div class="item-title" @click="isshow">1. 什么叫永久会员？</div>
    <transition @enter="enter" @leave="leave" >
      <div class="item-content" v-if="show"> 永久会员是面试马的会员，会员有效期永久。 </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
.content-item {
  background: rgba(245, 245, 245, 0.75);
  padding: 12px 16px;
  border-radius: 8px;

  .item-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    cursor: pointer;
    //禁止选中
    user-select: none;
    &:hover {
      color: #1677ff;
    }
  }
  .item-content {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
    overflow: hidden;
    text-overflow: ellipsis; //省略号显示
    transition: all 0.3s;
  }
}
</style>
